<template>
  <nav class="navbar bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg">
    <div class="navbar-start">
      <div class="dropdown">
        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
          </svg>
        </div>
        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
          <li><router-link to="/" class="hover:text-blue-300">首页</router-link></li>
          <li><router-link to="/daisyui-demo" class="hover:text-blue-300">daisyUI演示</router-link></li>
          <li><router-link to="/dashboard" class="hover:text-blue-300">仪表板</router-link></li>
          <li><router-link to="/knowledge" class="hover:text-blue-300">知识库</router-link></li>
          <li><router-link to="/mcp-management" class="hover:text-blue-300">MCP管理</router-link></li>
          <li><router-link to="/settings" class="hover:text-blue-300">设置</router-link></li>
        </ul>
      </div>
      <router-link to="/" class="btn btn-ghost text-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        LLM PC
      </router-link>
    </div>
    
    <div class="navbar-center hidden lg:flex">
      <ul class="menu menu-horizontal px-1">
        <li><router-link to="/" class="hover:text-blue-300">首页</router-link></li>
        <li><router-link to="/daisyui-demo" class="hover:text-blue-300">daisyUI演示</router-link></li>
        <li><router-link to="/dashboard" class="hover:text-blue-300">仪表板</router-link></li>
        <li><router-link to="/knowledge" class="hover:text-blue-300">知识库</router-link></li>
        <li><router-link to="/mcp-management" class="hover:text-blue-300">MCP管理</router-link></li>
        <li><router-link to="/settings" class="hover:text-blue-300">设置</router-link></li>
      </ul>
    </div>
    
    <div class="navbar-end">
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
          <div class="w-10 rounded-full bg-blue-500 flex items-center justify-center">
            <span class="text-white font-semibold">{{ authStore.username?.charAt(0).toUpperCase() || 'U' }}</span>
          </div>
        </div>
        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
          <li>
            <a class="justify-between">
              {{ authStore.username }}
              <span class="badge">用户</span>
            </a>
          </li>
          <li><a @click="handleLogout">退出登录</a></li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { useAuthStore } from '../stores/auth';
import { useRouter } from 'vue-router';

const authStore = useAuthStore();
const router = useRouter();

const handleLogout = () => {
  authStore.logout();
  router.push('/login');
};
</script>